<script setup>
import {
  getBizAccountType,
  addBizAccountType,
  updateBizAccountType,
  findMaxSort
} from "@/api/biz/bizAccountType";

const props = defineProps({
  id: {
    type: [Number, String],
    default: ""
  }
});

const formRef = ref();
const data = ref({
  loading: false,
  form: {
    id: props.id,
    ruleJson: []
  }
});

onMounted(() => {
  if (data.value.form.id != "") {
    getInfo();
  } else {
    findMaxSort().then((res) => {
      data.value.form.sort = res.data;
    });
  }
});

function getInfo() {
  data.value.loading = true;
  getBizAccountType(props.id).then((res) => {
    data.value.loading = false;
    data.value.form = res.data;
    if (res.data.ruleRemark) {
      data.value.form.ruleJson = JSON.parse(res.data.ruleRemark);
    } else {
      data.value.form.ruleJson = [];
    }
  });
}

function addRule() {
  var object = {
    edit: true,
    type: "",
    name: "",
    rule: "",
    remark: ""
  };
  data.value.form.ruleJson.push(object);
}
function saveRules(index, item) {
  item.edit = false;
}
function editRules(index, item) {
  item.edit = true;
}
defineExpose({
  submit(callback) {
    if (data.value.form.id == "") {
      formRef.value.validate((valid) => {
        if (valid) {
          addBizAccountType(data.value.form).then(() => {
            ElMessage.success({
              message: "保存成功",
              center: true
            });
            callback && callback();
          });
        }
      });
    } else {
      formRef.value.validate((valid) => {
        if (valid) {
          data.value.form.ruleRemark = JSON.stringify(data.value.form.ruleJson);
          updateBizAccountType(data.value.form).then(() => {
            ElMessage.success({
              message: "修改成功",
              center: true
            });
            callback && callback();
          });
        }
      });
    }
  }
});
</script>

<template>
  <div v-loading="data.loading">
    <el-form
      ref="formRef"
      :model="data.form"
      :rules="data.rules"
      label-width="120px"
      label-suffix=" "
      label-position="top"
      style="padding: 0 20px"
    >
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="账户名称" prop="accountName">
            <el-input
              placeholder="请输入账户名称"
              v-model="data.form.accountName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账户标识" prop="accountType">
            <el-input
              placeholder="请输入账户标识"
              v-model="data.form.accountType"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账户单位" prop="unit">
            <el-input placeholder="请输入账户单位" v-model="data.form.unit" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否启用" prop="status">
            <el-switch
              v-model="data.form.status"
              active-text="否"
              inactive-text="是"
              active-value="1"
              inactive-value="0"
              inline-prompt
              style="
                --el-switch-off-color: #409eff;
                --el-switch-on-color: #ff4949;
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序" prop="sort">
            <el-input-number placeholder="序号" v-model="data.form.sort" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="兑换规则" prop="status">
            <el-button type="primary" size="small" @click="addRule"
              >添加</el-button
            >
            <el-table
              :data="data.form.ruleJson"
              :border="true"
              style="width: 99.99%; margin-top: 10px"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
              ></el-table-column>
              <el-table-column prop="name" label="名称" width="120">
                <template v-slot="scope">
                  <el-input
                    v-model="scope.row.name"
                    autocomplete="off"
                    placeholder="名称"
                    v-if="scope.row.edit"
                  ></el-input>
                  <span v-else>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="标识" width="110">
                <template v-slot="scope">
                  <el-input
                    v-model="scope.row.type"
                    autocomplete="off"
                    placeholder="标识"
                    v-if="scope.row.edit"
                  ></el-input>
                  <span v-else>{{ scope.row.type }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="rule" label="比例" width="100">
                <template v-slot="scope">
                  <el-input
                    v-model="scope.row.rule"
                    autocomplete="off"
                    placeholder="比例"
                    v-if="scope.row.edit"
                  ></el-input>
                  <span v-else>{{ scope.row.rule }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="说明">
                <template v-slot="scope">
                  <el-input
                    v-model="scope.row.remark"
                    autocomplete="off"
                    placeholder="说明"
                    v-if="scope.row.edit"
                  ></el-input>
                  <span v-else>{{ scope.row.remark }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" align="center">
                <template v-slot="scope">
                  <el-button
                    size="small"
                    type="primary"
                    plain
                    @click="saveRules(scope.$index, scope.row)"
                    v-if="scope.row.edit"
                    >保存</el-button
                  >
                  <el-button
                    size="small"
                    type="danger"
                    plain
                    @click="editRules(scope.$index, scope.row)"
                    v-else
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-divider content-position="left">说明</el-divider>
            <span>比例：1=?,如1:0.8 则填入0.8</span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              placeholder="输入备注"
              v-model="data.form.remark"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
